<template>
	<view class="container">
		<com-head textTit="我的预约" :typeVal="1" :scrollTop="scrollTop"></com-head>
		<!-- <view class="tabList">
			<view class="list"  @click="chiose(index)"
			:class="activeIndex == index ? 'active' : '' "
			v-for="(ele,index) in list" :key="index">{{ele}}</view>
		</view> -->
		<view class="orderWrap" v-if="reserveList.length">
			<view class="item" v-for="(ele,index) in reserveList" :key="index">
				<view class="head">
					<text class="projectName">项目预约</text>
					<!-- cecalStatus 取消灰色类名 红色  status-->
					<text class="status">{{getGetStatus(ele.order_num,ele.status)}}</text>
				</view>
				<!-- 购买项目时 -->
				<view class="projectInfo">
					<view class="left" v-for="(item,index1) in ele.projects" :key="index1">
						<image :src="item.pic[0]" mode=""></image>
						<view class="info">
							<view class="itemName">{{item.name}}（{{item.duration}}分）</view>
							<view class="bottom">
								<text class="price">¥{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="resevaInfo">
					<view class="info">预约时间 ：<text>{{ele.date}} {{ele.time}}</text></view>
					<view>预约门店 ：<text>{{ele.store.title}}</text></view>
				</view>
				<!-- 底部操作按钮 -->
				<view class="operation" :class="ele.status == 0 ? 'operation2' : ''">
					<view class="left">
						应付 ：<text style="margin-left: 47rpx;">¥{{ele.total_amount}} ({{ele.number}}人)</text>
					</view>
					<view class="operationBtn" >
						<view class="common" v-if="ele.status !=0" @click="cancelReservation(ele,index)">取消预约</view>
					</view>
				</view>
			</view>
			<u-loadmore margin-top="60" margin-bottom="30" :status="status" />
		</view>
		<!-- 没有数据时 -->
		<view class="noDate" v-else>
			<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/10/2x-8.png" mode=""></image>
			<view>暂无更多预约信息~</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="10">
			<view class="reasonWrap">
				<scroll-view scroll-y="true" style="max-height:500rpx">
					<view class="reasonList" v-for="(item, index) in reasonList" :key="index" >
						<view @click="chioseReason(item,index)" class="iconfont icon" :class="item.isCheck ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></view>
						<view v-if="item.id != 0" class="">{{item.content}}</view>
						<view class="reasonList" v-else>
							<text>其他</text>
							<input type="text" value="" v-model="item.content"/>
							<text>请您填写</text>
						</view>
					</view>
					<view class="buttonWrap">
						<view class="btn1 common1" @click="close">取消</view>
						<view class="btn2 common1" @click="cancelSubmit">确定</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				remark:'',
				disabled:false,
				reasonList:[],
				show:false,
				status:'loading',
				total:0,
				page:1,
				list:["全部","待付款"],
				activeIndex:0,
				reserveList:[],
				return_remark:'',
				projectId:'',
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad() {
			this.getReserveList()
			this.getCancel()
		},
		onReachBottom() {
			if (this.total > this.reserveList.length) {
				this.page++;
				this.getReserveList();
			}
		},
		methods: {
			close(){
				this.show = false
				this.return_remark = ''
				this.reasonList.forEach((ele)=>{
					 ele.isCheck = false
				})
			},
			// 获取取消原因
			async getCancel (){
				let {data,code} = await this.$u.api.getCancel();
				let obj ={
					id:0,
					content:'',
					isCheck:false
				}
				data.forEach((ele)=>{
					ele.isCheck = false
				})
				this.reasonList = [...data,obj]
			},
			chioseReason(ele,index){
				this.reasonList.forEach((ele,val)=>{
					if(index != val){
						ele.isCheck = false
					}
					if(ele.id == 0){
						ele.content = ''
					}
				})
				ele.isCheck = !ele.isCheck
			},
			// 获取状态
			getGetStatus(orderNum,status){
				if(status == 0){
					return "已取消"
				}else if(status != 0 && orderNum){
					return "已开单"
				}else if(status == 1){
					return "待到店"
				}
			},
			async cancelSubmit(){
				let flag = false
				this.reasonList.forEach((ele,val)=>{
					if(ele.isCheck){
						flag = true
						this.return_remark = ele.content
					}
				})
				if(!flag){
					this.utlis.Toast('请选择取消原因')
					return
				}
				if(!this.return_remark){
					this.utlis.Toast('请填写取消原因')
					return
				}
				let {data,code} = await this.$u.api.delReserve({id:this.projectId,return_remark:this.return_remark});
				if(code){
					this.show = false
					this.return_remark = ''
					this.reasonList.forEach((ele)=>{
						ele.isCheck = false
					})
					this.page = 1
					this.reserveList = []
					this.status = "loading"
					await this.getReserveList()
					this.utlis.Toast('取消成功',"success")
				}
			},
			// 取消预约
			cancelReservation(ele,index){
				this.projectId = ele.id
				this.show = true
			},
			// 获取预约列表
			async getReserveList(){
				console.log(2222222222,"this.reserveListthis.reserveListthis.reserveList")
				let {data,code} = await this.$u.api.getReserve({page:this.page});
				console.log(data,"1111111111111")
				if(code){
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					this.reserveList = [...this.reserveList, ...data.data];
					this.reserveList.forEach((ele)=>{
						ele.projects.forEach((list)=>{
							list.pic = list.pic.split(',')
						})
					})
					this.total = data.total;
					if (this.total <= this.reserveList.length) this.status = 'nomore';
					else this.status = 'loading';
				}
				console.log(this.reserveList,"this.reserveListthis.reserveListthis.reserveList")
				// this.reserveList = data.data
			},
			chiose(index){
				this.activeIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	.icon-weixuanzhong{
		color: #979797;
		font-size: 34rpx;
		margin-right: 14rpx;
	}
	.icon-a-xingzhuang1{
		color: #D1B87D;
		font-size: 34rpx;
		margin-right: 14rpx;
	}
	.buttonWrap{
		display: flex;
		justify-content: space-between;
		.common1{
			width: 48%;
			line-height: 80rpx;
			background: linear-gradient(140deg,#f2e4a2 0%, #d1b87d);
			border-radius: 8rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			margin-top: 50rpx;
		}
		.btn1{
			border: 1rpx solid #d1b87d;
			background: #FFFFFF;
			color: #d1b87d;
		}
	}
	.reasonWrap{
		width: 660rpx;
		padding: 40rpx 30rpx 30rpx 30rpx;
		border-radius: 8rpx;
		.reasonList{
			display: flex;
			align-items: center;
			line-height: 60rpx;
		}
	}
	.noDate{
		width: 360rpx;
		position: absolute;
		left: 50%;
		top: 34%;
		transform: translate(-50%,-50%);
		color: #666666;
		font-size: 26rpx;
		text-align: center;
		image{
			width: 360rpx;
			height: 310rpx;
			display: block;
			margin-bottom: 78rpx;
		}
	}
	.orderWrap{
		.item{
			padding: 0 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 43rpx;
			.operation{
				padding: 0rpx 0 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					color: #999999;
					font-size: 24rpx;
					text{
						color: #333333;
						font-size: 28rpx;
					}
				}
				.operationBtn{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					>view{
						margin-left: 20rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 24rpx;
					}
					>view:nth-child(1){
						margin-left: 0rpx;
					}
					.goPay{
						width: 236rpx;
						line-height: 70rpx;
						background: #007664;
						border-radius: 6rpx;
					}
					.common{
						width: 128rpx;
						line-height: 70rpx;
						background: #007664;
						border-radius: 6rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 24rpx;
					}
					.border{
						background-color: #FFFFFF;
						color: #007664;
						border: 1rpx solid #007664;
					}
				}
				
			}
			.operation2{
				padding: 20rpx 0 20rpx 0;
			}
			.cacelDetails{
				padding:31rpx 0 32rpx 0;
				.cacelList{
					font-size: 24rpx;
					color: #999999;
					line-height: 26rpx;
					margin-bottom: 18rpx;
					display: flex;
					align-items: center;
					text{
						color: #333333;
						font-size: 24rpx;
						margin-left: 18rpx;
					}
				}
				.cacelList:last-child{
					margin-bottom: 0;
				}
			}
			.projectInfo{
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				padding: 32rpx 0;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				.left{
					display: flex;
					// align-items: center;
					margin-bottom: 30rpx;
					image{
						flex: none;
						width: 157rpx;
						height: 157rpx;
						border-radius: 6rpx;
						margin-right: 28rpx;
					}
					.info{
						.itemName{
							width: 440rpx;
							font-size: 32rpx;
							color: #000000;
							line-height: 45rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.stores{
							font-size: 24rpx;
							color: #999999;
							line-height: 26rpx;
							margin: 16rpx 0 28rpx 0;
						}
						.bottom{
							width: 441rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 75rpx;
							.num{
								color: #333333;
								font-size: 28rpx;
							}
						}
					}
				}
				.left:last-child{
					margin-bottom: 0;
				}
				.price{
					color: #007664;
					font-size: 30rpx;
				}
			}
			.resevaInfo {
				color: #999999;
				font-size: 24rpx;
				text{
					color: #333333;
					font-size: 28rpx;
				}
				.info{
					margin: 20rpx 0;
				}
			}
			.vipInfo{
				padding: 44rpx 0 47rpx 0;
				.left{
					color: #333333;
					font-size: 24rpx;
					image{
						flex: none;
						width: 114rpx;
						height: 58rpx;
						border-radius: 6rpx;
						margin-right: 23rpx;
					}
				}
			}
			.head{
				display: flex;
				justify-content: space-between;
				height: 106rpx;
				align-items: center;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				.projectName{
					color: #333333;
					font-size: 32rpx;
				}
				.status{
					color: #007664;
					font-size: 24rpx;
				}
				.cecalStatus{
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
	}
	.tabList{
		width:calc(750rpx - 64rpx);
		display: flex;
		justify-content: space-between;
		position: fixed;
		height: 132rpx;
		z-index: 999;
		background-color: #F6F7FA;
		padding: 40rpx 0;
		box-sizing: border-box;
		.list{
			width: 118rpx;
			height: 52rpx;
			background: rgba(194,194,194,.1);
			border-radius: 68rpx;
			text-align: center;
			line-height: 52rpx;
			color: #666666;
			font-size: 24rpx;
		}
		.active{
		  background: rgba(136,29,3,.1);
		  color: #007664;
		}
	}

}
input{
	border-bottom: 1px solid rgba(142,142,142,.24);
	margin: 0 10rpx;
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
page{
	background-color: #F4F6F8;
}
.u-radio{
	width: 100%!important;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}
.u-radio__label{
	margin-left: 20rpx !important;
}
</style>
